<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="hearder-search">
        <div class="toplineBox mb-10">
          <div class="toplineBox-left">
            <el-input v-model="searchWord" placeholder="填写问卷标题" size="small" class="w-140 mr-10"></el-input>
            <el-input v-model="searchWord" placeholder="填写问卷发布人" size="small" class="w-140 mr-10"></el-input>
            <el-button type="primary" size="small"><i class="el-icon-search"></i>搜索</el-button>
            <el-button size="small" @click="refreshFn"><i class="el-icon-refresh"></i>刷新</el-button>
          </div>
          <p class="numberline toplineBox-right">总{{ page.total }}条</p>
        </div>
      </div>
      <!--本体列表，数据 -->
      <div class="table-body">
        <div class="table-body-box">
          <el-table
              ref="multipleTable"
              :data="arryList"
              :stripe="tableStyle.tableStripe"
              :border="tableStyle.tableBorder"
              tooltip-effect="dark"
              style="width: 100%"
              header-cell-class-name="table-text-c"
              cell-class-name="table-text-c">
            <el-table-column
                prop="id"
                label="ID"
            width="100">
            </el-table-column>
            <el-table-column
                prop="title"
                label="问卷标题">
            </el-table-column>
            <el-table-column
                label="发布人">
              <template slot-scope="scope">
                <span v-if="scope.row.user">{{ scope.row.user.realname }}</span>
                <span v-else class="c-danger">无数据</span>
              </template>
            </el-table-column>
            <el-table-column
                label="问卷范围"
                width="110">
              <template slot-scope="scope">
                <span v-if="scope.row.user_ids">
                  <span v-if="scope.row.user_ids.length">特定职工</span>
                </span>
                <span v-else>
                  全校职工
                </span>
              </template>
            </el-table-column>
            <el-table-column
                label="问卷人数"
                width="110">
              <template slot-scope="scope">
                {{ scope.row.count }}
              </template>
            </el-table-column>
            <el-table-column
                label="已反馈人数"
                width="100">
              <template slot-scope="scope">
                <!--<span @click="checkUserList(scope.$index)" class="geiUser">{{scope.row.read_number}}</span>-->
                <el-button size="small" @click="detelTearch(1,scope.row)">{{ scope.row.read_number }}</el-button>
              </template>
            </el-table-column>
            <el-table-column
                label="未反馈人数"
                width="100">
              <template slot-scope="scope">
                <!--<span @click="checkUserList(scope.$index)" class="geiUser">{{scope.row.count-scope.row.read_number}}</span>-->
                <el-button size="small" @click="detelTearch(2,scope.row)">{{ scope.row.count - scope.row.read_number }}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column
                prop="create_time"
                width="110"
                label="发布时间">
            </el-table-column>
            <el-table-column
                prop="end_time"
                width="110"
                label="结束时间">
            </el-table-column>
            <el-table-column
                label="操作"
                width="140">
              <template slot-scope="scope">
                <el-dropdown @command="handleCommand" trigger="click">
                  <el-button type="primary" size="mini">
                    更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="1+'-'+scope.$index">复制问卷</el-dropdown-item>
                    <el-dropdown-item :command="2+'-'+scope.$index">问卷报告</el-dropdown-item>
                    <el-dropdown-item :command="3+'-'+scope.$index" v-if="userInfo&&userInfo.id==1">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
            background
            layout="prev, pager, next"
            :total="page.total"
            :page-size="page.pagesize"
            @current-change="handleSizeChange">
        </el-pagination>
      </el-col>
      <applycode :visible.sync="qrcodeVisible" v-if="qrcodeVisible" :codetype="codetype" :listId="listId"></applycode>
      <!--      问卷报告-->
      <detailQuestion :visible.sync="detailVisible" :detailId="detailId"></detailQuestion>
      <!--      已反馈/未反馈人员-->
      <questionList :visible.sync="detaillistVisible" :detailId="detailId" :typeQuestion="typeQuestion"></questionList>
      <!--      复制内部问卷-->
      <copyQuestion :visible.sync="copyDetailVisible" :detailId="detailId" @InitFn="InitFn"></copyQuestion>
    </div>
  </div>
</template>

<script>
import applycode from '@/components/dialog/applycode.vue'
import {pagination, tableoption} from '@/utils/util.js'
import api from '@/utils/api.js'
import detailQuestion from "./components/detailQuestion";
import questionList from "./components/questionList";
import copyQuestion from "./components/copyQuestion";
import {mapGetters} from "vuex";

export default {
  components: {
    applycode,
    detailQuestion,
    questionList,
    copyQuestion
  },
  data() {
    return {
      codetype: 2, // 1 通知 2 问卷
      handleSelection: [],
      qrcodeVisible: false,
      arryList: [], // 页面数据列表
      // 搜索设置
      searchWord: '', // 搜索名称
      // 设置table样式
      tableStyle: tableoption,
      // 设置table页面分页所需
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      listId: 0,
      detailVisible: false,
      detailId: 0,
      detaillistVisible: false,
      typeQuestion: 0,
      copyDetailVisible: false
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  created() {
    this.InitFn()
  },
  methods: {
    // 初始化
    InitFn() {
      this.$post(api.questionnaire_inside_index, {
        p: this.page.pageindex
      }).then((response) => {
        if (response.code === 0) {
          let array_ = []
          for (let i in response.list.data) {
            response.list.data[i].create_time = response.list.data[i].create_time.split(' ')[0]
            response.list.data[i].end_time = response.list.data[i].end_time.split(' ')[0]
            array_.push(response.list.data[i])
          }
          this.arryList = array_
          this.page.total = response.list.total
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    checkIdCard(option) {
      this.editId = option || ''
      this.addclassVisible = true
    },
    handleSelectionChange(val) {
      this.handleSelection = val
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    // 刷新页面
    refreshFn() {
      this.page.pageindex = 1
      this.InitFn()
    },
    addStudent() {
      this.addVisible = true
    },
    gotoDetail(id) {
      this.$router.push('questionTeacherDetail?editId=' + id)
    },
    // 复制内部问卷
    gotoCopyDetail(id) {
      this.detailId = id
      this.copyDetailVisible = true
      // this.$router.push('questionTeacherCopy?editId=' + id)
    },
    getqrcode(index) {
      // this.qrcodeSrc = this.arryList[index].qr_code
      // this.qrcodeVisible = true
      this.listId = this.arryList[index].id
      // this.qrcodeSrc = this.arryList[index].qr_code
      this.qrcodeVisible = true
    },
    detelfn(id, index) {
      this.$post(api.admin_questionnaire_delete, {id: id}).then((response) => {
        if (response.code === 0) {
          this.arryList.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    detelTearch(type, option) {
      // 已反馈人员
      // detailId: 0,
      //     detaillistVisible: false,
      //     typeQuestion: 0
      this.detailId = option.id
      this.typeQuestion = type
      this.detaillistVisible = true
      // this.$router.push('questionTeachermyuserlist?id=' + option.id + '&type=' + type)
    },
    checkUserList(index) {
      // 未反馈人员
      this.$router.push('questionuserlist?id=' + this.arryList[index].id)
    },
    handleDetel(index) {
      this.$confirm('确认永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.detelRespon(index)
      }).catch(() => {
      })
    },
    detelRespon(index) {
      this.$post(api.questionnaire_inside_delete, {id: this.arryList[index].id}).then((response) => {
        if (response.code === 0) {
          this.arryList.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    handleCommand(command) {
      let command_ = command.split('-')
      let n = this;
      if (Number(command_[0]) === 1) {
        this.gotoCopyDetail(this.arryList[command_[1]].id)
      }
      // 问卷报告
      if (Number(command_[0]) === 2) {
        this.detailId = this.arryList[command_[1]].id;
        this.detailVisible = true;
        // this.gotoDetail(this.arryList[command_[1]].id)
      }
      // 视频记录
      if (Number(command_[0]) === 3) {
        this.handleDetel(command_[1])
      }
    }
  },
  mounted() {
  },
  // 缓存机制 star
  beforeRouteEnter(to, from, next) {
    // 利用路由元信息中的 meta 字段设置变量，方便在各个位置获取。这就是为什么在 meta 中定义 isNeedRefresh。
    // 当从详情页返回时，将 isNeedRefresh 设为 false，表示不刷新数据
    if (to.meta.isNeedRefresh) {
      this.InitFn() // 详情页面需要刷新数据
    }
    next()
  },
  beforeRouteLeave(to, from, next) {
    // isNeedRefresh 进入页面判断是否需要刷新
    if (to.meta.isNeedRefresh) {
      from.meta.keepAlive = true
    } else {
      from.meta.keepAlive = false
    }
    next()
  }
  // 缓存机制 end
}
</script>
